<template>
  <div>
    <!-- 销售优惠券 -->
    <basic-modal ref="SellCouponsModal" width="640" customeClass="select-park-modal" static="true">
      <h3 slot="title">销售优惠券</h3>
      <div class="modal-body" slot="modal-body">
        <el-form
          ref="SellCoupons_form"
          :model="SellCouponsModalData.mainData"
          :rules="mainDatarules"
          label-width="80px"
          label-position="left"
        >
          <el-form-item label="选择优惠券" v-if="isSingleCoupon">
            <p class="grayChunk">
              <span>{{SellCouponsModalData.couponName}}</span>
            </p>
          </el-form-item>
          <div class="row-inline" v-else>
            <el-form-item prop="coupon" label="选择优惠券">
              <el-select
                v-model="SellCouponsModalData.mainData.coupon"
                :placeholder="SellCouponsModalData.placeholderStr"
                @change="Coupon_change()"
                filterable
                :filter-method="searchCoupon"
                popper-class="select-search-filter"
                @visible-change="allCoupon"
                @blur="couponBlurEvent"
                @focus="couponFocusEvent"
              >
                <el-option
                  v-for="(item,index) in SellCouponsModalData.select_list"
                  :label="item.name"
                  :value="index"
                  :key="index"
                  v-if="!item.isHidden"
                >
                  <span style="float: left">{{ item.name }}</span>
                  <el-tooltip
                    placement="bottom-start"
                    style="float: right;"
                    v-if="item.parkNameList && item.parkNameList.length"
                  >
                    <div slot="content">
                      <p v-for="park in item.parkNameList">{{park}}</p>
                    </div>
                    <span>{{ item.parkNameListStr }}</span>
                  </el-tooltip>
                </el-option>
              </el-select>
            </el-form-item>
            <el-button
              size="small"
              type="primary"
              @click="SellCouponsModal_detail_open"
              class="select-park-btn ake_btn_text ake_btn"
              :disabled="SellCouponsModalData.mainData.coupon===0 || SellCouponsModalData.mainData.coupon ? false : true"
            >查看详情</el-button>
          </div>

          <div class="row-inline">
            <el-form-item prop="traderName" label="选择商户">
              <el-input
                v-model.number="SellCouponsModalData.mainData.traderName"
                disabled
                placeholder="请选择"
              ></el-input>
            </el-form-item>
            <el-button
              size="small"
              type="primary"
              @click="getTraderListModal_open()"
              class="select-park-btn ake_btn_text ake_btn"
              style="width: 75px"
            >请选择</el-button>
          </div>

          <el-form-item label="券信息">
            <div class="coupon-info">
              <p>{{SellCouponsModalData.couponName}}</p>
              <p class="twoItem">
                <span>券折扣价：</span>
                <span>{{SellCouponsModalData.mainData.realPrice}} 元/张</span>
                <span
                  style="text-decoration: line-through;"
                  class="tip"
                >(原价 {{SellCouponsModalData.mainData.originalPrice}} 元/张)</span>
              </p>
              <p class="twoItem">
                <span>剩余总数：</span>
                <span v-if="!SellCouponsModalData.mainData.maxBuyNum">无限 张</span>
                <span v-else>{{SellCouponsModalData.mainData.totalAvilableToBuy}} 张</span>
                <span v-if="!SellCouponsModalData.mainData.maxBuyNum" class="tip">(限购数量 无限 张)</span>
                <span v-else class="tip">(限购数量 {{SellCouponsModalData.mainData.maxBuyNum}} 张)</span>
              </p>
            </div>
          </el-form-item>

          <div class="row-inline">
            <el-form-item prop="sellNum" label="购买数量">
              <el-input v-model.number="SellCouponsModalData.mainData.sellNum" placeholder="请输入数量"></el-input>
            </el-form-item>
            <div class="grayChunk total">
              <span>总价：{{pay}}</span>
              <span class="unit">元</span>
            </div>
          </div>
          <el-form-item prop="sellMoney" label="商家折扣价">
            <el-input v-model.number="SellCouponsModalData.mainData.sellMoney" placeholder="请输入价格"></el-input>
            <span class="unit">元</span>
          </el-form-item>
        </el-form>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button
          type="button"
          class="ake_btn ake_btn_text ake_btn_confirm"
          @click="SellCouponsModal_save()"
        >确认</button>
        <button class="ake_btn ake_btn_text modal-close" @click="closed('SellCouponsModal')">取消</button>
      </div>
    </basic-modal>

    <!-- 选择商户 -->
    <basic-modal ref="SelectMerchantsModal" static="true" width="1050">
      <h3 slot="title">选择商户</h3>
      <div class="modal-body ModalBody" slot="modal-body">
        <div class="HeadMSG">
          <el-form
            ref="form"
            :model="SelectMerchantsModalDataForm"
            label-width="80px"
            label-position="left"
          >
            <el-form-item label="商家名称：">
              <el-input v-model="SelectMerchantsModalDataForm.name"></el-input>
            </el-form-item>
          </el-form>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="SelectMerchantsModalData_change"
            class="ake_btn"
          >搜索</el-button>
        </div>

        <div class="tableDetial">
          <template>
            <el-table :data="SelectMerchantsModalData.tbodysInfo" border style="width:100%">
              <el-table-column
                v-for="(item,index) in SelectMerchantsModalData.theadsInfo"
                :prop="item.prop"
                :label="item.label"
                :min-width="item.minWidth"
              ></el-table-column>
              <el-table-column label="操作" min-width="80">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    size="small"
                    @click="handleEdit(scope.$index, scope.row)"
                  >选择</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page="SelectMerchantsModalData.pageNumber"
            :total="SelectMerchantsModalData.total"
            @current-change="getReportDetailPagination"
            @prev-click="prevPage"
            @next-click="nextPage"
          ></el-pagination>
        </div>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button
          class="ake_btn ake_btn_text modal-close"
          @click="closed('SelectMerchantsModal')"
        >返回上一级</button>
      </div>
    </basic-modal>

    <!-- 查看优惠券详情 -->
    <basic-modal ref="SellCouponsModal_detail" static="true" width="640" :needModalFooter="false">
      <h3 slot="title">优惠券详情</h3>
      <div class="modal-body" slot="modal-body">
        <div class="SellCouponscss">
          <table>
            <tr>
              <td>券名称</td>
              <td>{{SellCouponsModalData_detial.name}}</td>
            </tr>
            <tr>
              <td>券类型</td>
              <td>{{SellCouponsModalData_detial.couponTypeStr}}</td>
            </tr>
            <tr
              v-if="SellCouponsModalData_detial.couponTypeId==4 && (SellCouponsModalData_detial.couponRuleId==0 || SellCouponsModalData_detial.couponRuleId==2)"
            >
              <td>优惠类型</td>
              <td>
                <span>减去前面 {{SellCouponsModalData_detial.faceValue}}分钟的时长再计费</span>
              </td>
            </tr>
            <tr
              v-if="SellCouponsModalData_detial.couponTypeId==4 && (SellCouponsModalData_detial.couponRuleId==1 || SellCouponsModalData_detial.couponRuleId==3)"
            >
              <td>优惠类型</td>
              <td>
                <span>减去后面 {{SellCouponsModalData_detial.faceValue}}分钟的时长再计费</span>
              </td>
            </tr>
            <tr v-if="SellCouponsModalData_detial.couponTypeId==1">
              <td>停车费优惠</td>
              <td>{{SellCouponsModalData_detial.faceValue}}元</td>
            </tr>
            <tr
              v-if="SellCouponsModalData_detial.couponTypeId==1 || (SellCouponsModalData_detial.couponTypeId==4 && SellCouponsModalData_detial.couponRuleId==0)"
            >
              <td>是否可叠加</td>
              <td>
                <span>{{SellCouponsModalData_detial.isCoverStr}}</span>
                <span
                  v-if="SellCouponsModalData_detial.isCover"
                  class="grayTip"
                >（一次停车最多使用 {{SellCouponsModalData_detial.maxCoverNum}}张）</span>
              </td>
            </tr>
            <tr v-if="SellCouponsModalData_detial.couponTypeId==2">
              <td>折扣</td>
              <td>{{SellCouponsModalData_detial.faceValue}}折</td>
            </tr>
            <tr v-if="SellCouponsModalData_detial.couponTypeId==3">
              <td>面值</td>
              <td>{{SellCouponsModalData_detial.faceValue}}元</td>
            </tr>
            <tr
              v-if="SellCouponsModalData_detial.couponTypeId==4 && (SellCouponsModalData_detial.couponRuleId==0 || SellCouponsModalData_detial.couponRuleId==1)"
            >
              <td>享受免费时长</td>
              <td>{{SellCouponsModalData_detial.useParkingFee}}</td>
            </tr>
            <tr>
              <td>适用车场</td>
              <td>{{SellCouponsModalData_detial.parkNameListStr}}</td>
            </tr>
            <tr>
              <td>财务主体</td>
              <td>{{SellCouponsModalData_detial.financialParkIdStr}}</td>
            </tr>
            <tr>
              <td>使用有效期</td>
              <td>
                <span>领券后 {{SellCouponsModalData_detial.validDay}}分钟内使用</span>
                <span v-if="SellCouponsModalData_detial.expireRefund" class="grayTip">（逾期退回）</span>
              </td>
            </tr>
            <tr>
              <td>优惠券原价</td>
              <td>
                <span>{{SellCouponsModalData_detial.originalPrice}}元</span>
                <span class="grayTip">（折扣价：{{SellCouponsModalData_detial.realPrice}}元）</span>
              </td>
            </tr>
            <tr>
              <td>使用条件</td>
              <td>
                <span>停车费在</span>
                <span>{{SellCouponsModalData_detial.useRule}}</span>
                <span>可使用此优惠</span>
              </td>
            </tr>
            <tr>
              <td>券数量</td>
              <td v-if="SellCouponsModalData_detial.isLimitTotal">无限</td>
              <td v-else>
                <span>{{SellCouponsModalData_detial.totalNum}}</span>
                <span class="grayTip">（有限）</span>
              </td>
            </tr>
            <tr>
              <td>可售卖时间</td>
              <td>{{SellCouponsModalData_detial.sellFromTo}}</td>
            </tr>
            <tr>
              <td>可发放时间</td>
              <td>{{SellCouponsModalData_detial.validFromTo}}</td>
            </tr>
            <tr>
              <td>可线上购买券的商户</td>
              <td>{{SellCouponsModalData_detial.couponListStr}}</td>
            </tr>
          </table>
        </div>
      </div>
    </basic-modal>
  </div>
</template>

<script>
import utils from "@mixins/utils.js";
//modal
import invokeModal from "@mixins/modal/invokeModal.js";

import js from "./js/sellManageComponent";

export default {
  name: "sellManageComponent",
  mixins: [utils, invokeModal, js],
  data() {
    return {};
  },
  methods: {}
};
</script>

<style lang="less" scoped>
@import "../less/c_sell.less";
</style>